<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="电话登记" type='number'maxLength='11' minLength='11'>
      <el-input v-model="form.tel"></el-input>
    </el-form-item>
    <input type="date" v-model="form.date"/>
    <el-form-item label="预定类型">
      <el-select v-model="form.region" placeholder="请选择预定类型" style="width:100%">
        <el-option label="宴会大桌" value="宴会大桌"></el-option>
        <el-option label="普通大桌" value="普通大桌"></el-option>
        <el-option label="普通中桌" value="label"></el-option>
        <el-option label="普通小桌" value="label"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="到店时间">
      <el-row style=" border: 3px solid #eee">
        <el-radio v-model="radio" label="8:30">8:30</el-radio>
        <el-radio v-model="radio" label="9:00">9:00</el-radio>
        <el-radio v-model="radio" label="9:30">9:30</el-radio>
        <el-radio v-model="radio" label="11:00">11:00</el-radio>
        <el-radio v-model="radio" label="11:30">11:30</el-radio>
        <el-radio v-model="radio" label="12:00">12:00</el-radio>
      </el-row>

      <el-row style=" border: 3px solid #eee" height="10px">
        <el-radio v-model="radio" label="12:30">12:30</el-radio>
        <el-radio v-model="radio" label="17:00">17:00</el-radio>
        <el-radio v-model="radio" label="17:30">17:30</el-radio>
        <el-radio v-model="radio" label="18:00">18:00</el-radio>
        <el-radio v-model="radio" label="18:30">18:30</el-radio>
        <el-radio v-model="radio" label="19:00">19:00</el-radio>
        </el-row>

    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
    </el-form-item>
  </el-form>
  </template>


<script>
  export default {
    data() {
      return {
        radio: '8:30',
        form: {
          tel: '',
          region: '',
          date:''
        }
      }
    },
    methods: {
      onSubmit() {
        //post the information to back-end
        console.log('submit!');
        console.log(this.form.region+" "+this.form.tel+" "+this.radio+" "+this.form.date);
      }
    }
  }
</script>
